 <template>
  <div class="intergration-wrapper">
    <centerHeader/>

    <div class="centerCate-wrap">
      <ul>
        <li>
          <p>
            <span class="title-01">所在省：</span>
            <span class="title-01">
              <el-select v-model="province_id" @change="choseProvince" placeholder="省级地区">
                <el-option
                  v-for="item in province"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </span>
            <i class="icon iconfont icon-daohang icon-02"></i>
          </p>
        </li>
        <div class="clear"></div>
        <li>
          <p>
            <span class="title-01">所在市：</span>
            <span class="title-01">
              <el-select v-model="city_id" @change="choseCity" placeholder="市级地区">
                <el-option v-for="item in city" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </span>
            <i class="icon iconfont icon-daohang icon-02"></i>
          </p>
        </li>
        <div class="clear"></div>
        <li>
          <p>
            <span class="title-01">所在区：</span>
            <span class="title-01">
              <el-select v-model="area_id" placeholder="区级地区">
                <el-option v-for="item in area" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </span>
            <i class="icon iconfont icon-daohang icon-02"></i>
          </p>
        </li>
        <div class="clear"></div>
        <li>
          <div class="detail-txt">
            <div class="box-l">
              <span class="title-03">详细地址：</span>
            </div>
            <div class="box-r">
              <span class="title-04">
                <el-input v-model="address" placeholder="请输入详细地址"></el-input>
              </span>
            </div>
          </div>
        </li>
      </ul>

      <div class="submit-box">
        <button class="submit-btn" @click="submit">保存</button>
      </div>
    </div>

    <centerFooter/>
  </div>
</template>

 <script type="text/ecmascript-6">
import centerHeader from "@/views/center/components/centerHeader";
import centerFooter from "@/views/center/components/centerFooter";
import constant from "@/utils/constant.js";
// 引用API文件
import http from "@/utils/http.js";

export default {
  name: "addressIndex",
  data() {
    return {
      isBuy: true,
      user_info: {},
      address_info: {},
      address:'',
      province: [],
      city: [],
      area: [],
      province_id: "",
      city_id: "",
      area_id: ""
    };
  },
  components: {
    centerHeader,
    centerFooter
  },
  methods: {
    submit() {
      let id = this.$route.query.address_id;
      if(this.province_id == ''){
        this.$message({
          message: '请选择省份',
          type: 'warning'
        });
        return false;
      }

      if(this.city_id == ''){
        this.$message({
          message: '请选择城市',
          type: 'warning'
        });
        return false;
      }

      if(this.area_id == ''){
        this.$message({
          message: '请选择地区',
          type: 'warning'
        });
        return false;
      }

      if(this.address == ''){
        this.$message({
          message: '请填写详细地址',
          type: 'warning'
        });
        return false;
      }

      http.post(this, {
        url: "address/address_update",
        data: {
          token: localStorage.getItem("user_token"),
          province_id: this.province_id,
          city_id: this.city_id,
          area_id: this.area_id,
          address: this.address,
          address_id: id
        },
        dataType: "json",
        success: function(data) {
          console.log("添加地址:", data);
          if (data.status == 1) {
            this.$router.push({
              name: "addressModify"
            });
          }
        }
      });
    },
    addressinfo(){
      let id = this.$route.query.address_id;
      http.get(this, {
        url: "address/address_detail",
        data: {
          token: localStorage.getItem("user_token"),
          address_id: id
        },
        dataType: "json",
        success: function(data) {
          console.log("地址信息:", data);
          if (data.status == 1) {
            this.address_info = data.info;
            this.address = data.info.address;
            this.province_id = data.info.province_id;
            this.city_id = data.info.city_id;
            this.area_id = data.info.area_id;
          }
        }
      });
    },
    choseProvince() {
      this.city = [];
      http.get(this, {
        url: "address/area_list",
        data: {
          token: localStorage.getItem("user_token"),
          pid: this.province_id
        },
        dataType: "json",
        success: function(data) {
          console.log("城市信息:", data);
          if (data.status == 1) {
            this.city = data.info;
            this.choseCity();
          }
        }
      });
    },
    choseCity() {
      this.area = [];
      http.get(this, {
        url: "address/area_list",
        data: {
          token: localStorage.getItem("user_token"),
          pid: this.city_id
        },
        dataType: "json",
        success: function(data) {
          console.log("区信息:", data);
          if (data.status == 1) {
            this.area = data.info;
          }
        }
      });
    },
    province_list() {
      http.get(this, {
        url: "address/area_list",
        data: {
          token: localStorage.getItem("user_token")
        },
        dataType: "json",
        success: function(data) {
          console.log("省信息:", data);
          if (data.status == 1) {
            this.province = data.info;
            this.choseProvince();
          }
        }
      });
    },
    userinfo() {
      http.get(this, {
        url: "ucenter/user_info",
        data: {
          token: localStorage.getItem("user_token")
        },
        dataType: "json",
        success: function(data) {
          console.log("用户信息:", data);
          if (data.status == 1) {
            this.user_info = data.info;
          } else {
          }
        }
      });
    }
  },
  created() {},
  activated() {
    this.userinfo();
    this.province_list();
    this.addressinfo();
  }
};
</script>

 <style scoped lang="scss">
.clear {
  clear: both;
}
.el-select-dropdown__item {
  font-size: 14px;
  padding: 0 20px;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #606266;
  height: 34px;
  line-height: 34px;
  box-sizing: border-box;
  cursor: pointer;
}
.intergration-wrapper {
}

.centerCate-wrap {
  width: 100%;
  text-align: center;

  ul {
    width: 100%;
    $letHeight: 0.8rem;

    li {
      border-top: 0.02rem solid $c-gray-dark;
      line-height: $letHeight;
      padding: 0 0.35rem;

      &:last-child {
        border-bottom: 0.02rem solid $c-gray-dark;
      }

      p {
        color: $c-mainC;
        @extend .cmm-clearfix;
        height: $letHeight;

        * {
          line-height: $letHeight;
          display: inline-block;
          vertical-align: middle;
        }

        a {
          width: 100%;
        }

        .icon-02 {
          float: right;
          font-size: 0.6rem;
        }

        .title-01 {
          font-size: 0.32rem;
          float: left;
        }

        .title-02 {
          font-size: 0.32rem;
          float: right;
          color: $c-danger;

          &.minus {
            color: $c-success;
          }
        }
      }

      .detail-txt {
        @extend .cmm-clearfix;
        .box-l {
          float: left;
          width: 1.6rem;
        }

        .box-r {
          float: left;
          width: 5rem;
          text-align: left;
          padding-top: 0.18rem;
        }

        .title-03 {
          color: $c-mainC;
          font-size: 0.32rem;
        }

        .title-04 {
          color: $c-mainC;
          font-size: 0.32rem;
          width: 100%;
          vertical-align: top;
          line-height: 0.4rem;
          display: inline-block;
        }
      }
    }
  }
}

.submit-box {
  padding: 0 0.66rem;
  margin-top: 0;
}
/deep/.el-select-dropdown__item{
    font-size: 0.3rem;
}
</style>
